<!DOCTYPE html>
<html>
<head>
    <title>销售数据输入</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"], input[type="password"], input[type="number"], input[type="date"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input[type="date"] {
            display: none;
        }
        button[type="submit"], button[type="button"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button[type="submit"]:hover, button[type="button"]:hover {
            background-color: #45a049;
            cursor: pointer;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        .error {
            color: red;
        }
        .warning {
            color: orange;
            font-size: 80%;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>销售数据输入</h1>
        <form id="login-form">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
            <button type="submit">登陆</button>
            <p id="login-error" class="error"></p>
        </form>

        <form id="sales-form" style="display:none;">
            <label for="customer-name">客户名称：</label>
            <input type="text" id="customer-name" name="customer-name" required>

            <label for="sale-date">销售日期：</label>
            <input type="text" id="sale-date" name="sale-date" placeholder="YYYY-M-D" required>
            <p class="warning">请输入正确的日期格式，如：2022-1-1</p>

            <label for="quantity">数量：</label>
            <input type="number" id="quantity" name="quantity" min="1" required>
            <p class="warning">数量必须大于0且为数字</p>

            <label for="unit-price">单价：</label>
            <input type="number" id="unit-price" name="unit-price" min="1" required>
            <p class="warning">单价必须大于0且为数字</p>

            <label for="note">备注：</label>
            <input type="text" id="note" name="note">

            <button type="submit">提交</button>

            <table id='sales-table'>
                <thead>
                    <tr>
                        <th>客户名称</th>
                        <th>销售日期</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>金额</th>
                        <th>备注</th>
                    </tr>
                </thead>

                <tbody></tbody>

                <tfoot></tfoot>
            </table>

        </form>

    </div>

    <script>

        // 登陆表单提交
        document.getElementById("login-form").addEventListener("submit", function(event) {
            event.preventDefault();
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            // 简单验证用户名和密码
            if (username === "admin" && password === "admin") {
                document.getElementById("login-form").style.display = "none";
                document.getElementById("sales-form").style.display = "block";
            } else {
                document.getElementById("login-error").innerHTML = "用户名或密码错误！";
            }
        });

        // 销售数据表单提交
        document.getElementById("sales-form").addEventListener("submit", function(event) {
            event.preventDefault();
            var customerName = document.getElementById("customer-name").value;
            var saleDate = document.getElementById("sale-date").value;
            var quantity = document.getElementById("quantity").value;
            var unitPrice = document.getElementById("unit-price").value;
            var note = document.getElementById("note").value;

            // 验证日期是否正确
            var dateRegex = /^\d{4}-\d{1,2}-\d{1,2}$/;
            if (!dateRegex.test(saleDate)) {
                document.getElementById("sale-date").classList.add("error");
                document.querySelector("#sale-date + .warning").style.display = "block";
                return;
            } else {
                document.getElementById("sale-date").classList.remove("error");
                document.querySelector("#sale-date + .warning").style.display = "none";
            }

            // 检查数据类型
            if (isNaN(parseFloat(quantity)) || quantity == 0) {
                document.getElementById("quantity").classList.add("error");
                document.querySelector("#quantity + .warning").style.display = "block";
                return;
            } else {
                document.getElementById("quantity").classList.remove("error");
                document.querySelector("#quantity + .warning").style.display = "none";
            }
            if (isNaN(parseFloat(unitPrice)) || unitPrice == 0) {
                document.getElementById("unit-price").classList.add("error");
                document.querySelector("#unit-price + .warning").style.display = "block";
                return;
            } else {
                document.getElementById("unit-price").classList.remove("error");
                document.querySelector("#unit-price + .warning").style.display = "none";
            }

            // 计算金额
            var amount = quantity * unitPrice;

            // 将数据添加到表格中
            var salesTable = document.getElementById("sales-table").getElementsByTagName("tbody")[0];
            var newRow = salesTable.insertRow();
            var cell1 = newRow.insertCell(0);
            var cell2 = newRow.insertCell(1);
            var cell3 = newRow.insertCell(2);
            var cell4 = newRow.insertCell(3);
            var cell5 = newRow.insertCell(4);
            var cell6 = newRow.insertCell(5);
            cell1.innerHTML = customerName;
            cell2.innerHTML = saleDate;
            cell3.innerHTML = quantity;
            cell4.innerHTML = unitPrice;
            cell5.innerHTML = amount;
            cell6.innerHTML = note;

            // 清空表单
            document.getElementById("customer-name").value = "";
            document.getElementById("sale-date").value = "";
            document.getElementById("quantity").value = "";
            document.getElementById("unit-price").value = "";
            document.getElementById("note").value = "";
        });
    </script>
</body>
</html>